<template>
	<view class="list-bg" :style="{height:contentHeight+'px'}">
		<scroll-view class="left-content" scroll-y="true">
			<view @tap="tapLeft(index)" :style="{backgroundColor:shopIndex===index?'#fff':'',borderLeft:shopIndex===index?'6rpx #49BDFB solid':''}" class="left-item" v-for="item,index in shopList" :key="item.id">
				{{item.list_name}}
			</view>
		</scroll-view>
		<scroll-view class="right-content" scroll-y="true">
			<view v-if="shopListIndex.length!==0" class="right-item" v-for="item,index in shopListIndex" :key="item.id">
				<view class="right-name">
					{{item.list_name}}
				</view>
				<view class="right-list-content" v-if="item.chidren.length!==0">
					<view v-for="item,index in item.chidren" :key="item.id" @tap="shopListTap(item.id)">
						<image :src="item.list_image" mode="widthFix"></image>
						<view>
							{{item.list_name}}
						</view>
					</view>
				</view>
				<view v-if="item.chidren.length===0">
					暂无信息。。。
				</view>
			</view>
			<view v-if="shopListIndex.length===0">
				暂无信息。。。
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getShopList
	} from "@/util/api/api.js"
	import {
		onLoad,
		onReady,
		onNavigationBarSearchInputClicked
	} from '@dcloudio/uni-app';
	let shopList = ref([]);
	let contentHeight = ref(0);
	let shopIndex = ref(0);
	let shopListIndex = ref([]);

	const tapLeft = (index) => {
		shopListIndex.value = shopList.value[index].chidren;
		shopIndex.value=index;
	}
	const initShopList = async () => {
		shopList.value = await getShopList();
		shopListIndex.value = shopList.value[0].chidren;
	}
	const shopListTap= async (id)=>{
		console.log(id);
		uni.navigateTo({
			url: '../search/search'
		})
	}
	onNavigationBarSearchInputClicked(() => {
		uni.navigateTo({
			url: '../search/search'
		})
	});
	onLoad(async () => {
		await initShopList()
	})
	onReady(() => {
		contentHeight.value = uni.getSystemInfoSync().windowHeight;
	})
</script>

<style lang="scss" scoped>
	.list-bg {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		display: flex;
		.left-content {
			width: 200rpx;

			.left-item {
				width: 200rpx;
				height: 100rpx;
				border-bottom: 2rpx #fff solid;
				font-size: 28rpx;
				background-color: #f7f7f7;
				text-align: center;
				line-height: 100rpx;
			}
		}

		.right-content {
			flex: 1;
			padding: 20rpx;
			.right-item{
				.right-name{
					font-weight: bold;
					padding: 30rpx;
				}
				.right-list-content{
					display: flex;
					flex-wrap: wrap;
					text-align: center;
					border-bottom: 2rpx solid #f7f7f7;
					border-top: 2rpx solid #f7f7f7;
					image{
						width: 170rpx;
						height: 170rpx;
					}
				}
			}
		}
	}
</style>
